<template>
  <ul class="todo-main">
    <!-- 使用 transition-group 可以实现列表动画效果 -->
    <transition-group name="todo" appear>
      <!--                                                给子组件传值 todo -->
      <MyItem v-for="todoObj in todoArr" :key="todoObj.id" :todo="todoObj">   
    </MyItem>
    </transition-group>
  </ul>
</template>

<script>
import MyItem from './MyItem.vue'

export default {
  name: 'MyList',
  props: ['todoArr',],
  components: {
    MyItem,
  },

}
</script>

<style scoped>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}

/* 这个class自动绑定的transition标签 */
.todo-enter-active {
    animation: aBiu 0.5s;
}

/* 这个class自动绑定的transition标签 */
.todo-leave-active {
    animation: aBiu 0.5s reverse;
}

/* 编写动画 */
@keyframes aBiu {
    from {
        transform: translateX(200px);
    }

    to {
        transform: translateX(0px);
    }
}
</style>

